<template>
    <div :class="layoutCls">
        <t-head-menu :class="menuCls" :theme="menuTheme" expand-type="popup" :value="active">
            <template #logo>
        <span v-if="showLogo" class="header-logo-container" @click="handleNav('/dashboard/base')">
          <logo-full class="t-logo"/>
        </span>
                <div v-else class="header-operate-left">
                    <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
                        <t-icon class="collapsed-icon" name="view-list"/>
                    </t-button>
                    <search :layout="layout"/>
                </div>
            </template>
            <template v-if="layout !== 'side'" #default>
                <menu-content class="header-menu" :nav-data="menu"/>
            </template>
            <template #operations>
                <div class="operations-container">
                    <!-- 搜索框 -->
                    <search v-if="layout !== 'side'" :layout="layout"/>

                    <!-- 全局通知 -->
                    <notice/>

                    <!--          <t-tooltip placement="bottom" :content="$t('layout.header.code')">
                                <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
                                  <t-icon name="logo-github" />
                                </t-button>
                              </t-tooltip>-->
                    <t-tooltip placement="bottom" :content="$t('layout.header.help')">
                        <t-button theme="default" shape="square" variant="text" @click="navToHelper">
                            <t-icon name="help-circle"/>
                        </t-button>
                    </t-tooltip>
                    <t-dropdown trigger="click">
                        <t-button theme="default" shape="square" variant="text">
                            <translate-icon/>
                        </t-button>
                        <t-dropdown-menu>
                            <t-dropdown-item
                                v-for="(lang, index) in langList"
                                :key="index"
                                :value="lang.value"
                                @click="(options) => changeLang(options.value as string)"
                            >{{ lang.content }}
                            </t-dropdown-item
                            >
                        </t-dropdown-menu
                        >
                    </t-dropdown>
                    <t-dropdown :min-column-width="120" trigger="click">
                        <template #dropdown>
                            <t-dropdown-menu>
                                <t-dropdown-item class="operations-dropdown-container-item"
                                                 @click="handleNav('/user/index')">
                                    <user-circle-icon/>
                                    {{ $t('layout.header.user') }}
                                </t-dropdown-item>
                                <t-dropdown-item class="operations-dropdown-container-item" @click="clearCache">
                                    <t-icon name="refresh"/>
                                    {{ $t('layout.header.clearCache') }}
                                </t-dropdown-item>
                                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                                    <poweroff-icon/>
                                    {{ $t('layout.header.signOut') }}
                                </t-dropdown-item>
                            </t-dropdown-menu>
                        </template>
                        <t-button class="header-user-btn" theme="default" variant="text">
                            <template #icon>
                                <t-avatar size="small" :image="fileView(user.userInfo.avatar)"/>
                                <!--                <t-icon class="header-user-avatar" name="user-circle" />-->
                            </template>
                            <div class="header-user-account">{{
                                    user.userInfo.nickname || user.userInfo.username
                                }}
                            </div>
                            <template #suffix>
                                <chevron-down-icon/>
                            </template>
                        </t-button>
                    </t-dropdown>
                    <t-tooltip placement="bottom" :content="$t('layout.header.setting')">
                        <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
                            <setting-icon/>
                        </t-button>
                    </t-tooltip>
                </div>
            </template>
        </t-head-menu>
    </div>
</template>

<script setup lang="ts">
import {ChevronDownIcon, PoweroffIcon, SettingIcon, TranslateIcon, UserCircleIcon} from 'tdesign-icons-vue-next';
import type {PropType} from 'vue';
import {computed} from 'vue';
import {useRouter} from 'vue-router';

import LogoFull from '@/assets/assets-logo-full.svg?component';
import {prefix} from '@/config/global';
import {langList} from '@/locales/index';
import {useLocale} from '@/locales/useLocale';
import {getActive} from '@/router';
import {useSettingStore, useTabsRouterStore, useUserStore, usePermissionStore} from '@/store';
import type {MenuRoute, ModeType} from '@/types/interface';
import {clearCache as clearCacheApi, logout} from '@/api/login';

import MenuContent from './MenuContent.vue';
import Notice from './Notice.vue';
import Search from './Search.vue';
import {MessagePlugin} from "tdesign-vue-next";

import {fileView} from "@/api/upload";

const props = defineProps({
    theme: {
        type: String,
        default: 'light',
    },
    layout: {
        type: String,
        default: 'top',
    },
    showLogo: {
        type: Boolean,
        default: true,
    },
    menu: {
        type: Array as PropType<MenuRoute[]>,
        default: () => [],
    },
    isFixed: {
        type: Boolean,
        default: false,
    },
    isCompact: {
        type: Boolean,
        default: false,
    },
    maxLevel: {
        type: Number,
        default: 3,
    },
});

const router = useRouter();
const settingStore = useSettingStore();
const tabsRouterStore = useTabsRouterStore();
const permissionStore = usePermissionStore();
const user = useUserStore();
const toggleSettingPanel = () => {
    settingStore.updateConfig({
        showSettingPanel: true,
    });
};

const active = computed(() => getActive());

const layoutCls = computed(() => [`${prefix}-header-layout`]);

const menuCls = computed(() => {
    const {isFixed, layout, isCompact} = props;
    return [
        {
            [`${prefix}-header-menu`]: !isFixed,
            [`${prefix}-header-menu-fixed`]: isFixed,
            [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
            [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
        },
    ];
});
const menuTheme = computed(() => props.theme as ModeType);

// 切换语言
const {changeLocale} = useLocale();
const changeLang = (lang: string) => {
    changeLocale(lang);
};

const changeCollapsed = () => {
    settingStore.updateConfig({
        isSidebarCompact: !settingStore.isSidebarCompact,
    });
};

const handleNav = (url: string) => {
    router.push(url);
};

const handleLogout = async () => {
    await logout();
    tabsRouterStore.removeTabRouterList();
    router.push({
        path: '/login',
        query: {redirect: encodeURIComponent(router.currentRoute.value.fullPath)},
    });
};

const clearCache = async () => {
    await clearCacheApi();
    permissionStore.perms = [];
    MessagePlugin.success('缓存清除成功！');
}

const navToGitHub = () => {
    window.open('https://github.com/tencent/tdesign-vue-next-starter');
};

const navToHelper = () => {
    window.open('http://tdesign.tencent.com/starter/docs/get-started');
};
</script>
<style lang="less" scoped>
.@{starter-prefix}-header {
    &-menu-fixed {
        position: fixed;
        top: 0;
        z-index: 1001;

        :deep(.t-head-menu__inner) {
            padding-right: var(--td-comp-margin-xl);
        }

        &-side {
            left: 232px;
            right: 0;
            z-index: 10;
            width: auto;
            transition: all 0.3s;

            &-compact {
                left: 64px;
            }
        }
    }

    &-logo-container {
        cursor: pointer;
        display: inline-flex;
    }
}

.header-menu {
    flex: 1 1 1;
    display: inline-flex;

    :deep(.t-menu__item) {
        min-width: unset;
    }
}

.operations-container {
    display: flex;
    align-items: center;

    .t-popup__reference {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .t-button {
        margin-left: var(--td-comp-margin-l);
    }
}

.header-operate-left {
    display: flex;
    align-items: normal;
    line-height: 0;
}

.header-logo-container {
    width: 184px;
    height: 26px;
    display: flex;
    margin-left: 24px;
    color: var(--td-text-color-primary);

    .t-logo {
        width: 100%;
        height: 100%;

        &:hover {
            cursor: pointer;
        }
    }

    &:hover {
        cursor: pointer;
    }
}

.header-user-account {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    color: var(--td-text-color-primary);
}

:deep(.t-head-menu__inner) {
    border-bottom: 1px solid var(--td-component-stroke);
}

.t-menu--light {
    .header-user-account {
        color: var(--td-text-color-primary);
    }
}

.t-menu--dark {
    .t-head-menu__inner {
        border-bottom: 1px solid var(--td-gray-color-10);
    }

    .header-user-account {
        color: rgb(255 255 255 / 55%);
    }
}

.operations-dropdown-container-item {
    width: 100%;
    display: flex;
    align-items: center;

    :deep(.t-dropdown__item-text) {
        display: flex;
        align-items: center;
    }

    .t-icon {
        font-size: var(--td-comp-size-xxxs);
        margin-right: var(--td-comp-margin-s);
    }

    :deep(.t-dropdown__item) {
        width: 100%;
        margin-bottom: 0;
    }

    &:last-child {
        :deep(.t-dropdown__item) {
            margin-bottom: 8px;
        }
    }
}
</style>

<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="less">
.operations-dropdown-container-item {
    .t-dropdown__item-text {
        display: flex;
        align-items: center;
    }
}
</style>
